<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>类名操作</title>
        <style>
        	#box{
        		width:300px;
        		height: 300px;
        		background: #f0f;
        		margin-top:20px;
        	}
        	.border{
        		border:5px solid #f00;
        	}
        </style>
    </head>
    <body>
    	<input type="button" value="添加border类">
    	<input type="button" value="删除border类">
    	<input type="button" value="切换border类">
    	<div id="box"></div>
		<script>
			var box = document.getElementById('box');
			var btns = document.querySelectorAll("input");
			//添加类
			btns[0].onclick = function(){
				box.classList.add("border");
			}
			//删除类
			btns[1].onclick = function(){
				box.classList.remove("border");
			}
			//切换类
			btns[2].onclick = function(){
				box.classList.toggle("border");
			}
		</script>
    </body>
</html>